import React, { useState } from 'react';
import { Space, Tag } from 'antd';
import './style.less';

interface FilterOption {
  label: string;
  value: string;
  count?: number;
}

interface FilterGroup {
  title: string;
  key: string;
  options: FilterOption[];
  multiple?: boolean;
}

const DataFilter: React.FC = () => {
  const [selected, setSelected] = useState<Record<string, string[]>>({});

  const filterGroups: FilterGroup[] = [
    {
      title: '品牌',
      key: 'brand',
      options: [
        { label: '华为', value: 'huawei', count: 123 },
        { label: '小米', value: 'xiaomi', count: 98 },
        { label: 'Apple', value: 'apple', count: 156 },
      ],
      multiple: true
    },
    {
      title: '价格',
      key: 'price',
      options: [
        { label: '0-1000元', value: '0-1000' },
        { label: '1000-2000元', value: '1000-2000' },
        { label: '2000元以上', value: '2000-more' },
      ]
    }
  ];

  const handleSelect = (groupKey: string, value: string) => {
    setSelected(prev => {
      const groupValues = prev[groupKey] || [];
      const group = filterGroups.find(g => g.key === groupKey);
      
      if (group?.multiple) {
        return {
          ...prev,
          [groupKey]: groupValues.includes(value) 
            ? groupValues.filter(v => v !== value)
            : [...groupValues, value]
        };
      }
      
      return {
        ...prev,
        [groupKey]: [value]
      };
    });
  };

  return (
    <div className="data-filter">
      {filterGroups.map(group => (
        <div key={group.key} className="filter-group">
          <div className="filter-title">{group.title}：</div>
          <div className="filter-options">
            <Space wrap>
              {group.options.map(option => (
                <Tag
                  key={option.value}
                  className={`filter-tag ${selected[group.key]?.includes(option.value) ? 'selected' : ''}`}
                  onClick={() => handleSelect(group.key, option.value)}
                >
                  {option.label}
                  {option.count !== undefined && <span className="count">({option.count})</span>}
                </Tag>
              ))}
            </Space>
          </div>
        </div>
      ))}
    </div>
  );
};

export default DataFilter;
